
<div style="POSITION: relative" id="content">
  <h3>使用easyUI创建折叠面板</h3>
  <div id="article_content" class="article_content">
    <p>在这个教程中,你会学习到关于easyui&nbsp;<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">Accordion,<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">Accordion 包含一个panel的集合,所有panel的header(头部)将显示,但是一次仅仅只有一个panel的body内容显示,当用户点击panel的头部(header),那个panel的内容将成为显示,其余的body内容将成为隐藏.</span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344481975_9522.png" alt=""><br>
      </span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><a href="http://www.jeasyui.com/tutorial/layout/accordion_demo.html" target="_blank" style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">查看示例
      Demo</a><br>
      </span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">我们将创建3个panel,第三个panel包含一个tree菜单.</span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span>
    <pre name="code" class="html">&lt;div class=&quot;easyui-accordion&quot; style=&quot;width:300px;height:200px;&quot;&gt;  
    &lt;div title=&quot;About Accordion&quot; iconCls=&quot;icon-ok&quot; style=&quot;overflow:auto;padding:10px;&quot;&gt;  
        &lt;h3 style=&quot;color:#0099FF;&quot;&gt;Accordion for jQuery&lt;/h3&gt;  
        &lt;p&gt;Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.&lt;/p&gt;  
    &lt;/div&gt;  
    &lt;div title=&quot;About easyui&quot; iconCls=&quot;icon-reload&quot; selected=&quot;true&quot; style=&quot;padding:10px;&quot;&gt;  
        easyui help you build your web page easily  
    &lt;/div&gt;  
    &lt;div title=&quot;Tree Menu&quot;&gt;  
        &lt;ul id=&quot;tt1&quot; class=&quot;easyui-tree&quot;&gt;  
            &lt;li&gt;  
                &lt;span&gt;Folder1&lt;/span&gt;  
                &lt;ul&gt;  
                    &lt;li&gt;  
                        &lt;span&gt;Sub Folder 1&lt;/span&gt;  
                        &lt;ul&gt;  
                            &lt;li&gt;&lt;span&gt;File 11&lt;/span&gt;&lt;/li&gt;  
                            &lt;li&gt;&lt;span&gt;File 12&lt;/span&gt;&lt;/li&gt;  
                            &lt;li&gt;&lt;span&gt;File 13&lt;/span&gt;&lt;/li&gt;  
                        &lt;/ul&gt;  
                    &lt;/li&gt;  
                    &lt;li&gt;&lt;span&gt;File 2&lt;/span&gt;&lt;/li&gt;  
                    &lt;li&gt;&lt;span&gt;File 3&lt;/span&gt;&lt;/li&gt;  
                &lt;/ul&gt;  
            &lt;/li&gt;  
            &lt;li&gt;&lt;span&gt;File2&lt;/span&gt;&lt;/li&gt;  
        &lt;/ul&gt;  
    &lt;/div&gt;  
&lt;/div&gt;  </pre>
    </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI 示例:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/layout/downloads/easyui-accordion-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-accordion-demo.zip</a></div>
    <br>
    <br>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><br>
      </span></span></p>
    <p><br>
    </p>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>